<template>
<div>
    <baidu-map id="allmap" @ready="mapReady" :scroll-wheel-zoom="true">
        <!-- bm-marker 就是标注点 定位在point的经纬度上 跳动的动画 -->
        <!-- <bm-marker :position="point" animation="BMAP_ANIMATION_BOUNCE"></bm-marker> -->
    </baidu-map>
</div>
</template>

<script>
export default {
    props: {
        // 经度
        longitude: {
            type: Number,
            require: true
        },
        // 纬度
        latitude: {
            type: Number,
            require: true
        },
    },
    data() {
        return {
            point: "",
            position: {
                name: '北京贝克瑞会展服务有限责任公司',
                address: '北京市海淀区高梁桥斜街59号中坤大厦1215室',
                phone: '+86-10-6343-0880',
                phoneVisit: '+86-10-6343-0990',
            },
            positionEn: {
                name: 'Bakery China Exhibitions Co., Ltd.',
                // address: '北京市海淀区高梁桥斜街59号中坤大厦1215室',
                tel: '+86(0)10 8219 1892',
                fax: '+86(0)10 8219 1779',
            },
        }
    },
    mounted() {},
    methods: {
        mapReady({
            BMap,
            map
        }) {
            // 选择一个经纬度作为中心点
            this.point = new BMap.Point(this.longitude, this.latitude);
            map.centerAndZoom(this.point, 18);
            let sContent=''

            let sContentCn =
                `<div class="baiduMarkerBox">
                <p style="font-size:16px;font-weight:bold;margin-top: 10px;color:#D07852">${this.position.name} </p>
                <p style="font-size:13px;margin: 5px 0;">地址： ${this.position.address} </p>
                <p style="font-size:13px;margin: 5px 0;">参展咨询电话：${this.position.phone} </p>
                <p style="font-size:13px;margin: 5px 0;">参观咨询电话：${this.position.phoneVisit}</p>
                </div>`
            let sContentEn =
                `<div class="baiduMarkerBox">
                <p style="font-size:16px;font-weight:bold;margin-top: 10px;color:#D07852;white-space:nowrap">${this.positionEn.name} </p>
                <p style="font-size:13px;margin: 5px 0;">Tel: ${this.positionEn.tel} </p>
                <p style="font-size:13px;margin: 5px 0;">Fax: ${this.positionEn.fax}</p>
                </div>`
            sContent=this.localeCn?sContentCn:sContentEn
            var point = new BMap.Point(this.longitude, this.latitude); // 创建点坐标
            var marker = new BMap.Marker(point);
            map.addOverlay(marker);
            // //点击图标时候调用信息窗口
            var infoWindow = new BMap.InfoWindow(sContent);
            // marker.addEventListener('click', function() {
            // 	this.openInfoWindow(infoWindow);
            // });
            marker.openInfoWindow(infoWindow);
        },
    }
}
</script>

<style lang="scss" scoped>
/* 设定地图的大小 */
#allmap {
    height: 600px;
    width: 1000px;
    display: block;
    margin: 0 auto;

    .baiduMarkerBox {
        width: 400px;
    }
}

@media (max-width:768px) {
    #allmap {
        height: 200px;
        width: 360px;
        .baiduMarkerBox {
            width: 280px;
        }
    }
}
</style>
